<template>
	<scroll-view scroll-y class="" style="min-height: 100vh;"
		:style="{background:'url('+Imgbase+'/new_goodmy_bgc.png)','background-size':'100%',}">


		<view class="padding-top-65 padding-left-40">
			<image class="w-80 h-80" :src="Imgbase + '/new_goodlx_img1.png'" mode="aspectFit" @click="back">
			</image>

			<image class="w-200 h-80 padding-left-30" :src="Imgbase + '/new_goodfanx_imgrule.png'" mode="aspectFit">
			</image>


		</view>

		<view  style="position: relative;width: 100%;margin-top: 10upx;min-height: 1300upx;z-index: 999;">
			<view class="" style="width: 95%;height: 230rpx; margin: 20rpx auto 0;"
				:style="{background:'url('+Imgbase+'/new_goodbox_img2.png)','background-size':'100% 100%',}">
				<!-- <scroll-view scroll-x class=" nav" style="width: 92%;margin-left: 4%;box-shadow:3px 3px 3px 0px #e5c757;border-radius: 15upx;"> -->
				<view class="Afont font-weight-500"
					style="text-align: center;padding-top: 30rpx;width: 92%;margin: 0 auto;color: #8E4E0D;">
					<view class="" >
						<view class="">
							单个编号获得{{num}}个及以上摘星赏，
						</view>
						<view class="">
							则按概率赠送一次繁星赏
						</view>
					</view>
				</view>
			</view>


			<view class="radius-20" style="padding-top: 50rpx;z-index: 999;width: 96%;margin: -20rpx auto 0;"
				:style="{background:'url('+Imgbase+'/new_goodbox_img3.png)','background-size':'100% 100%',}">

				<!-- 繁星赏 -->
				<view class="" 
					style="position: relative;  min-height: 1000rpx;width: 100%; margin: 0 auto;padding-top: 20rpx;padding-left: 25rpx;">
					<!-- 繁星 -->
					<view class=" h-90 w-180">
						<image class="h100 w100" :src="Imgbase + '/new_goodfanx_img13.png'" mode="aspectFit" >
						</image>
					</view>
					<view class="cu-card  light" style="position: relative;
				width: 100%;margin-left: 0%;margin-top: 10upx;" v-for="(item,index) in desc.extroinfo">
						<view class="padding-left padding-tb-xs df alc" style="height: 55upx;">
							<view class="">
								<image :src="Imgbase + '/new_good_ssr.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 31"></image>
								<image :src="Imgbase + '/new_good_sr.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 32"></image>
								<image :src="Imgbase + '/new1_infinite_SD.png'" style="width: 90upx;height: 45upx;"
									mode="aspectFit" v-if="item.reword_type_id == 30"></image>
								<image :src="Imgbase + '/new_good_r.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 21"></image>
								<image :src="Imgbase + '/new_good_n.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 17"></image>
								<image :src="Imgbase + '/new_good_m.png'"  class="w-100 h-50" 
									mode="aspectFit" v-if="item.reword_type_id == 16"></image>
								<image :src="Imgbase + '/new_good_sss.png'" class="w-200 h-50" mode="aspectFit"
									v-if="item.reword_type_id == 35"></image>
							</view>
							<view class=" padding-left-sm Afont" style="line-height: 50upx;color: #8E4E0D;">
								共{{item.goodinfo.length}}种 获取概率{{Number(item.point/desc.point*100).toFixed(3)}}%</view>
						</view>
						<view class="padding-left-45">
							<view class="item_d Afont" v-for="(gooditem,goodindex) in item.goodinfo" style="width: 30%;margin-bottom: 10upx;
								height: 290upx;" :style="{background:'url('+Imgbase+'/new_goodbp_img8.png)','background-size':'100% 100%',}">
								<image class="radius-15 w100 h-195" :src="gooditem.goodmes.adimage" mode="aspectFill" style="border: 4rpx solid #8A5E51;">
								</image>
								<view class=" font-24 margin-top-10"
									style="max-width: 250upx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0 8rpx;font-weight: bold;">
									{{gooditem.goodmes.name}}
								</view>
								<view class="fff font-20 margin-top-10" style="padding: 0 8rpx;color: #8E4E0D; ">
									获取概率: {{Number(gooditem.point/desc.point*100).toFixed(3)}}%
								</view>
							</view>
						</view>

					</view>

					<view style="clear: both;"></view>
				</view>


			</view>


			<view style="clear: both;"></view>
		</view>
		<view style="clear: both;"></view>
		<view style="width: 100%;height: 180upx;"></view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/icon.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				desc: [],
				desc2: [],
				id: 0,
				title: '抽赏',
				page: 1,
				count: 10,
				modalName: null,
				did: 0,
				loadModal: false,
				round: 0,
				num: 0,
				open_custom_box: 0,
				open_custom_box_mes: '',
				num2: 0,
				open_custom_box2: 0,
				open_custom_box_mes2: '',
				mes_text: '',
				mes_text_show: '',
				timer: null,
				both_thow: 0,
			}
		},
		onLoad(e) {
			this.id = e.id
			this.num = e.num
			this.moreStarDesc()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			both_thowbtn(i) {
				this.both_thow = i
			},
			setData() {
				let _this = this;
				let i = 0;
				this.timer = setInterval(function() {
					if (i < _this.mes_text.length) {
						_this.mes_text_show = _this.mes_text.slice(0, i++)
					} else {
						_this.mes_text_show = _this.mes_text
						clearTimeout(_this.timer);
						_this.timer = null;
					}
				}, 70)
			},
			hideModal(e) {
				this.modalName = null
			},
			moreStarDesc(id) {
				let _this = this;
				_this.page = 1;
				// _this.loadModal = true;
				uni.request({
					url: _this.$globals.apibase + '/api/star/moreStarDesc',
					data: {
						token: uni.getStorageSync('token'),
						id: _this.id,
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == '401') {
							uni.setStorageSync('token', '');
						}
						if (res.data.code == '1') {
							if (res.data.data.desc != null) {
								_this.both_thow = 1
								_this.desc = res.data.data.desc;
								// _this.title = res.data.data.desc.box_mes.name;
							} else {
								_this.desc = 1
							}
						}
						if (res.data.code == '0') {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
		},
		onUnload() {},
		onShow() {},
		onUnload() {
			if (this.timer) {
				clearTimeout(this.timer);
				this.timer = null;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.item_d {
		float: left;
		margin-right: 24rpx;
	}



	button::after {
		border: initial;
	}

	.fl {
		float: left;
	}

	.fr {
		float: right;
	}

	.refresh_icon {
		height: 80upx;
		width: 80upx;
	}

	.both_two {
		display: flex;
		align-items: center;
		justify-content: space-around;

		image {
			width: 100%;
			height: 100%;
		}

		.two_item {
			width: 330rpx;
			height: 90rpx;
		}
	}

	.both_two_s {
		width: 380rpx;
		height: 100rpx;
		margin: 0 auto 0;
		padding-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>